<template>
    <view>
        <!-- components/pwdPopup/index.wxml -->
        <van-popup :show="showClone" position="bottom" :round="true" :closeable="true" @close="onHidePay" custom-style="height: 65%">
            <view class="input_main">
                <view class="input_title">
                    <text>请输入支付密码</text>
                </view>
                <view class="input_price">
                    <text>¥{{ formatAmount }}</text>
                </view>
                <view class="input_row">
                    <view class="pwd_item" v-for="(item, i) in 6" :key="i">
                        <text v-if="password.length > i"></text>
                    </view>
                    <input class="input_control" password type="number" v-model="password" @input="inputPwd" maxlength="6" />
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
// components/pwdPopup/index.js
export default {
    data() {
        return {
            //输入的密码
            password: '',

            formatAmount: '',
            i: '',
            showClone: false
        };
    },
    mixins: [require('miniprogram-computed').behavior],
    props: {
        //是否展示密码输入层
        show: false,
        /**
         * 消费金额
         */
        amountYuan: ''
    },
    computed: {
        formatAmount(data) {
            let amount = data.amountYuan;
            if (typeof amount == 'number') {
                return amount.toFixed(2);
            } else if (typeof amount == 'string') {
                return parseFloat(amount).toFixed(2);
            } else {
                return data.amountYuan;
            }
        }
    },
    methods: {
        /**
         * 隐藏支付密码输入层
         */
        onHidePay: function () {
            this.setData({
                showClone: false,
                password: ''
            });
        },
        /**
         * 输入密码监听
         */
        inputPwd: function (e) {
            let val = e.detail.value;
            if (val.length >= 6) {
                this.setData({
                    password: val
                });
                this.$emit('onComplete', {
                    detail: {
                        password: val
                    }
                });
                let that = this;
                setTimeout(function () {
                    that.onHidePay();
                }, 500);
            }
        }
    },
    created: function () {},
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
